<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout" style="height: 60px">
      <Row :gutter="16">
        <Col span="8">
          <div>订单总数：</div>
        </Col>
        <Col span="8">
          <div>订单总数</div>
        </Col>
        <Col span="8">
          <div>订单总数</div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div>
        <Row class="alignCenter">
          <span class="title">待派工工序订单列表</span></Row
        >
        <Row>
          <search
            :columns="searchData"
            @getSearch="getSearch(arguments, 'params')"
          ></search>
        </Row>

        <div class="tableContent" :style="{ height: tableHeight + 'px' }">
          <el-table
            ref="table"
            :data="callList"
            style="width: 100%"
            :height="tableHeight"
            row-key="id"
            border
            header-cell-style="tableHeaderColor"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            />

            <el-table-column
              label="工序名称"
              prop="planNo"
              show-overflow-tooltip
              align="center"
            />

            <el-table-column
              label="产品名称"
              prop="productId"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  productData.find((i) => i.id === scope.row.productId)
                    ?.productName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单数量"
              prop="orderCount"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="计划状态"
              prop="status"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  statusData.find((i) => i.value === scope.row.status)?.label
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="300"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <Button
                  size="small"
                  icon="ios-apps-outline"
                  class="operationBtn"
                  @click="handleEditRow(scope.row)"
                  >生成领料单</Button
                >
                <Button
                  size="small"
                  icon="ios-keypad"
                  class="operationBtn"
                  @click="handleEditRow(scope.row, 'detail')"
                  >详情</Button
                >
                <Button
                  size="small"
                  type="error"
                  ghost
                  @click="handleDeleteRow(scope.row, 'params')"
                  >删除</Button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="callTotal" />
          <Page
            :total="callTotal"
            :page-size="callParams.pageSize"
            :current="callParams.current"
            @on-change="changePageNum"
            @on-page-size-change="changePageNum"
            show-sizer
          />
        </div>
      </div>
      <div>
        <Row class="alignCenter">
          <span class="title">已派工工序订单列表</span></Row
        >
        <Row>
          <search
            :columns="searchData"
            @getSearch="getSearch(arguments)"
          ></search>
        </Row>

        <div class="tableContent" :style="{ height: tableHeight + 'px' }">
          <el-table
            ref="table"
            :data="list"
            style="width: 100%"
            :height="tableHeight"
            row-key="id"
            border
            header-cell-style="tableHeaderColor"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            />
            <el-table-column
              label="工序名称"
              prop="planNo"
              min-width="150"
              show-overflow-tooltip
              align="center"
            />

            <el-table-column
              label="产品名称"
              prop="productId"
              min-width="150"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  productData.find((i) => i.id === scope.row.productId)
                    ?.productName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单数量"
              prop="orderCount"
              min-width="150"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="计划状态"
              prop="status"
              min-width="150"
              show-overflow-tooltip
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  statusData.find((i) => i.value === scope.row.status)?.label
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <Button
                  size="small"
                  icon="ios-apps-outline"
                  class="operationBtn"
                  @click="handleEditRow(scope.row)"
                  >生成领料单</Button
                >
                <Button
                  size="small"
                  icon="ios-keypad"
                  class="operationBtn"
                  @click="handleEditRow(scope.row, 'detail')"
                  >详情</Button
                >
                <Button
                  size="small"
                  type="error"
                  ghost
                  @click="handleDeleteRow(scope.row)"
                  >删除</Button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" />
          <Page
            :total="total"
            :page-size="params.pageSize"
            :current="params.current"
            @on-change="
              (e) => {
                changePageNum(e, 'params');
              }
            "
            @on-page-size-change="
              (e) => {
                changePageNum(e, 'params');
              }
            "
            show-sizer
          />
        </div>
      </div>
    </div>
    <Modal
      :mask-closable="false"
      v-model="deleteShow"
      title="删除"
      class="modal-title-layout"
    >
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t("common.sureDelete") }}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>

    <CreateOrUpdateModal
      :visible="createStatus"
      :form="form"
      title="领料单生成"
      @update:visible="createStatus = $event"
      :handleAddSubmit="handleAddSubmit"
      :material="material"
    />
  </div>
</template>

<script>
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import CreateOrUpdateModal from "./modal_open.vue";
import {
  materialTransferOrderApi,
  procedureOrderDataApi,
  productAllApi,
  delProcedureOrderApi,
  procedureResourceApi,
} from "@/api/scheduling/dispatchManagement";
export default {
  name: "list.vue",
  components: { search, CreateOrUpdateModal },
  mixins: [toggleTableOperation],
  data() {
    return {
      params: {
        pageSize: 20,
        current: 1,
      },
      statusData: [
        { label: "已下发", value: 1 },
        { label: "未下发", value: 0 },
      ],
      searchData: [
        {
          title: "工序名称",
          key: "planNo",
        },
        {
          title: "产品名称",
          key: "productId",
          type: "select",
          dicData: [],
          params: {
            label: "productName",
            value: "id",
          },
        },
      ],

      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      materialList: [],
      productData: [],
      callList: [],
      callTotal: 0,
      callParams: {
        pageSize: 10,
        current: 1,
      },
      material: [],
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 600;
    },
  },

  mounted() {
    this.getList();
    this.getListCall();
    this.relevance();
  },
  methods: {
    relevance() {
      productAllApi().then((res) => {
        this.productData = res.data;
        this.searchData[1].dicData = res.data;
      });
    },
    getSearch(arg, type) {
      this.searchParams = arg[0] || {};
      if (type === "params") {
        this.getListCall();
        return;
      }
      this.getList();
    },
    getListCall() {
      procedureOrderDataApi({
        ...this.callParams,
        status: 0,
        ...this.searchParams,
      }).then((res) => {
        if (res.code === 200) {
          this.callList = res.data.records;
          this.callTotal = res.data.total;
        }
      });
    },

    async getList() {
      try {
        procedureOrderDataApi({
          ...this.params,
          status: 1,
          ...this.searchParams,
        }).then((res) => {
          if (res.code === 200) {
            this.list = res.data.records;
            this.total = res.data.total;
          }
        });
      } catch (error) {
        console.error(error);
        this.$Message.error("获取列表失败");
      }
    },

    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },
    handleAdd() {
      this.form = {};
      this.createStatus = true;
    },

    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit(data) {
      console.log(data, "ssss");
      const params = {
        materialName:data[0].materialName,
        materialType:data[0].materialType,
        numPutCompare:data[0].numPutCompare,
        storageName:data[0].storageName,
        id: this.form.id,
        currenNaterialCount: Number(data[0].needNumber),
        count:'1',
        procedureCount:130,
        alreadyMaterialCount:130, 
        planCount:130,
   
      };
      console.log(params, "params");
      materialTransferOrderApi(params).then((res) => {
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.createStatus = false;
          this.getListCall();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    handleEditRow(row, type) {
      if (type === "detail") {
        const queryRouter = {
          ...row,
          productName: this.productData.find((i) => i.id === row.productId)
            ?.productName,
        };
        this.$router.push({
          path: "/scheduling/dispatchManagementDetail",
          query: queryRouter,
        });
        return;
      }

      procedureResourceApi({ procedureId: row.procedureId }).then((res) => {
        if (res.code === 200) {
          if (res.data.records.length) {
            const { configJson } = res.data.records[0];
            const putMaterial = JSON.parse(configJson).storage[0];
            console.log(
              JSON.parse(configJson).storage,
              "JSON.parse(configJson).storage"
            );
            this.material = putMaterial.IntMaterial.map((item) => {
              return {
                ...putMaterial,
                putMaterialId: item.MaterialId,
                numPutCompare:putMaterial.outMaterial? Number(putMaterial.outMaterial[0].numPutCompare):0,
                needNumber: Number(row.orderCount),
                outputNumber:
                  Number(putMaterial.numPutCompare) * Number(row.orderCount) ||
                  0,
              };
            });
          }
        }
      });
      this.form = { ...row };
      this.createStatus = true;
    },
    handleDeleteRow(row, type) {
      this.currentItem = { ...row, typeDle: type };
      this.deleteShow = true;
    },
    handleDeleteSure() {
      delProcedureOrderApi({ ids: [this.currentItem.id] }).then((res) => {
        if (res.code === 200) {
          this.$Message.success(res.message);

          this.deleteShow = false;
          if (this.currentItem.typeDle === "params") {
            this.getListCall();
          } else {
            this.getList();
          }

          this.currentItem = {};
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    changePageNum(val, type) {
      console.log(val, type);
      if (type === "params") {
        this.params.current = val;
        this.getList();
        return;
      }
      this.callParams.current = val;
      this.getListCall();
    },
    changePageSize(val, type) {
      console.log(val, type);
      if (type === "params") {
        this.params.pageSize = val;
        this.getList();
        return;
      }
      this.callParams.pageSize = val;
      this.getListCall();
    },
  },
};
</script>

<style scoped>
.alignCenter {
  display: flex;
  align-items: center;
}
</style>
